<template>
    <div id="searchResult"  v-if="searchList.length">
      <p>搜索结果如下，请做选择：</p>
      <EasyScrollbar :barOption="listBar">
      <ul>
        <li v-for="item in searchList" :key="item.id" @click="getSearchInfor(item)" :title="item.name"><span class="name">{{item.name}}</span></li>
      </ul>
      </EasyScrollbar>
    </div>
    <p v-else="ispShow" class="nodata">暂无数据</p>

</template>

<script>
    export default {
        name: "searchInfrastResult",
        data() {
          return {
            /*isUlshow:false,*/
            ispShow:false,
            listBar: {
              barColor: "#26a2d6",   //滚动条颜色
              barWidth: 4,           //滚动条宽度
              railColor: "#405569",     //导轨颜色
              barMarginRight: 6,     //垂直滚动条距离整个容器右侧距离单位（px）
              barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
              barOpacityMin: 0.4,      //滚动条非激活状态下的透明度
              zIndex: "auto",        //滚动条z-Index
              autohidemode: true,     //自动隐藏模式
              horizrailenabled: false,//是否显示水平滚动条
            },
          }
        },
        props:{
          searchList: {
            type: Array,
          }
        },
      methods:{
          getSearchInfor: function (item) {
            this.$emit("clickInfra",{
              info:item,
              })
          },
      },
    }
</script>

<style scoped lang="scss">
  @import "../../../static/common/common.scss";
  #searchResult{
    width: 280px;
    @include borderBlur;
    margin-top: 20px;

    p{
      font-size: 12px;
      color: $color-border;
      text-indent: 15px;
    }

    ul{
      list-style: none;
      margin: 0;
      padding: 0 0 15px 0;
      max-height: 400px;
      li{
        font-size: $list-font;
        color: $font-color-normal;
        padding-left: 30px;
        background: url("../../../static/images/index/search-icon.png") no-repeat 8px;
        background-size: 18px 18px;
        cursor: pointer;
        span.name{
          display: inline-block;
          width: 240px;
          vertical-align: middle;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap
        }
        &:hover {
          color: #fff;
        }
      }
    }
  }
  .nodata{
    font-size: 14px;
    color: $color-border;
    text-indent: 15px;
    margin-top: 20px;
    width: 280px;
    @include borderBlur;
  }

</style>
